<template>
  <div class="index">
    <div v-if="this.$cookies.isKey('username')" class="nav">
      <transition name="el-zoom-in-center">
        <img v-show="isShow"  alt="Vue logo" src="../assets/success.png" height="100px" width="100px">
      </transition>

      <br>
      <div class="username"> 欢迎您
        <el-avatar class="avatar"> {{this.$cookies.get('username')}} </el-avatar>
        登出：<el-button @click="logout" type="danger" icon="el-icon-top-right" circle></el-button>
      </div>
      <br>
      <br>
      <el-button @click="resetDateFilter">清除日期过滤器</el-button>
      <el-button @click="clearFilter">清除所有过滤器</el-button>
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="ipAddress"
          label="提交记录IP"
          width="180">
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="affecRows"
          label="影响行数"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          sortable
          width="180"
          column-key="date"
          :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
          :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column
          prop="desc"
          label="描述"
          :formatter="formatter">
        </el-table-column>
        <el-table-column
          prop="type"
          label="提交类型"
          width="100"
          column-key="type"
          :filters="[{ text: '新建', value: '新建' }, { text: '修改', value: '修改' }, { text: '优化', value: '优化' }, { text: '重构', value: '重构' }, { text: '其他', value: '其他' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type=typeStyles[scope.row.type]
              disable-transitions>{{types[scope.row.type]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm
              @confirm = "handleDelete(scope.$index, scope.row)"
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
            >
              <el-button size="mini"
                         type="danger" slot="reference"
                         >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="id"-->
<!--          type="hide">-->
<!--        </el-table-column>-->
      </el-table>
      <br>
      <i class="el-icon-edit"></i>当前提交次数： {{ this.sumbmitNumber}}  &nbsp;&nbsp;&nbsp;
      <i class="el-icon-view"></i>总代码行数： {{ this.totalRow}}
    </div>
    <div  v-else>
      <span @click="login"> 请点击登陆！ </span> &nbsp; &nbsp;
      <h1>Welcome to info page</h1>
    </div>

  </div>
</template>

<script>

import { logoutUrl } from '@/api/login.js'
import { getAllServer, deleteServer } from '@/api/record.js'
export default {
  name: 'index',
  data () {
    return {
      isShow: true,
      tableData: [{
        ipAddress: '192.168.06.5',
        projectName: '王小虎',
        affecRows: 78,
        createTime: '2016-05-02',
        desc: '拉啊啦啦',
        type: 0,
        id: ''
      }],
      types: ['新建', '修改', '优化', '重构', '其他'],
      typeStyles: ['success', 'warning', '', 'danger', 'info'],
      sumbmitNumber: 0,
      totalRow: 0
    };
  },
  methods: {
    logout (){
      this.$axios.get(logoutUrl).then(res => {
        this.$cookies.remove('username')
        this.$message({
          message: '恭喜你，登出成功',
          type: 'success'
        });
        window.location = '/';
      })
    },
    login (){
      window.location = '/';
    },
    closeImg (){
      this.isShow = false
    },
    resetDateFilter () {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter () {
      this.$refs.filterTable.clearFilter();
    },
    formatter (row, column) {
      // alert(JSON.stringify(row))
      return row.desc;
    },
    filterTag (value, row) {
      return this.types[row.type] === value;
    },
    filterHandler (value, row, column) {
      const property = column.property;
      return row[property] === value;
    },
    getAllInfo () {
      let that = this;
      this.$axios.get(getAllServer).then(res => {
        if (res.data.code === 20000){
          this.tableData = res.data.data.records
          this.sumbmitNumber = res.data.data.sumbmitNumber
          this.totalRow = res.data.data.totalRow
        }
        // eslint-disable-next-line handle-callback-err
      }).catch(function (error) {
        if (error.response.status === 403){
          that.$message({
            message: '登陆信息过期，请重新登陆',
            type: 'warning'
          });
        } else {
          that.$message({
            message: '数据获取失败',
            type: 'error'
          });
        }
      })
    },
    handleEdit (index, row) {
      console.log(index, row);
    },
    handleDelete (index, row) {
      let that = this;
      this.$axios.get(deleteServer, {
        params: { 'id': row.id }
      }).then(res => {
        if (res.data.code === 20000){
          this.$message({
            message: '恭喜你，删除成功',
            type: 'success'
          });
          location.reload()
        }
      }).catch(function (error) {
        if (error.response.status === 403){
          that.$message({
            message: '登陆信息过期，请重新登陆',
            type: 'warning'
          });
        } else {
          that.$message({
            message: '发生了错误',
            type: 'error'
          });
        }
      })
    }
  },
  mounted () {
    setTimeout(() => {
      this.closeImg()
    }, 1000)
    if (this.$cookies.isKey('username')){
      // 说明已登陆
      this.getAllInfo()
    }
  }
}
</script>

<style scoped type="text/css" lang="less">
  .username{
    display: inline;
    /*padding-left: 100px;*/
    .avatar{
      margin-right: 100px;
    }
  }
.demo-ruleForm{
  margin: 0 auto;
  /*text-align: center;*/
  width: 400px;
  margin-top: 50px;
}
</style>
